<template>
  <view class="wheel-page">
    <!-- 顶部标题栏 -->
    <view class="header">
      <view class="title-wrapper">
        <text class="main-title">{{ title || '豆豆优选' }}</text>
        <view class="title-decoration"></view>
      </view>
      <button class="share-icon-btn" open-type="share">
        <text class="share-icon">🔗</text>
      </button>
    </view>

    <!-- 转盘区域（按 LeaferJS 官方要求：页面级 canvas，不使用组件） -->
    <view class="wheel-container" :style="{ width: canvasPx + 'px', height: canvasPx + 'px' }">
      <canvas
        id="leafer"
        type="2d"
        class="wheel-canvas"
        @touchstart="receiveEvent"
        @touchmove="receiveEvent"
        @touchend="receiveEvent"
        @touchcancel="receiveEvent"
      ></canvas>

      <!-- 顶部指针 -->
      <view class="pointer"></view>
      
      <!-- GO 按钮覆盖在画布中心 -->
      <view class="go-button" @click="startSpin">
        <text class="go-text">GO</text>
      </view>
    </view>

    <!-- 底部按钮区域 -->
    <view class="bottom-actions">
      <view class="action-circle" @click="onSettings">
        <text class="icon">⚙️</text>
      </view>
      <view class="action-circle" @click="onEdit">
        <text class="icon">✏️</text>
      </view>
    </view>
  
  <!-- 设置面板 -->
  <view v-if="showSettings" class="settings-mask" @click.self="closeSettings">
    <view class="settings-panel">
      <view class="panel-title">设置</view>
      <view class="panel-row">
        <text>震动</text>
        <switch :checked="vibrateOnTick" @change="(e)=>vibrateOnTick.value=e.detail.value" />
      </view>
      <view class="panel-row">
        <text>不重复抽取</text>
        <switch disabled :checked="true" />
      </view>
      <view class="panel-row">
        <text>旋转时长(秒)</text>
        <view class="stepper">
          <button @click="spinSeconds.value=Math.max(1,spinSeconds.value-1)">－</button>
          <text class="num">{{ spinSeconds }}</text>
          <button @click="spinSeconds.value=Math.min(15,spinSeconds.value+1)">＋</button>
        </view>
      </view>
      <view class="panel-row">
        <text>语音播报</text>
        <switch disabled :checked="false" />
      </view>
      <view class="panel-row">
        <text>背景音乐</text>
        <switch :checked="bgmOn" @change="(e)=>bgmOn.value=e.detail.value" />
      </view>
      <button class="panel-close" @click="closeSettings">关闭</button>
    </view>
  </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShareAppMessage, onReady, onShow, onUnload } from '@dcloudio/uni-app'
// #ifdef MP-WEIXIN
import { Leafer, Ellipse, Rect, Group, Text, useCanvas } from '@leafer-ui/miniapp'
// #endif

/**
 * 转盘选项配置
 */
const wheelOptions = reactive([
  { text: '选项1', color: '#FF7757' },
  { text: '零嘴吃', color: '#7FFF4D' },
  { text: '凯鲜', color: '#4D9CFF' }
])

/**
 * Leafer 实例及转盘组
 * @type {import('vue').Ref<any>}
 */
const leaferRef = ref(null)
const wheelGroupRef = ref(null)
const isSpinning = ref(false)
const currentRotation = ref(0)
const canvasPx = ref(300)
const title = ref('豆豆优选')
const wedgeRefs = ref([]) // 保存每个扇形的引用，用于高亮
let animationFrameId = null // 保存动画帧ID，用于取消动画
let highlightTimeoutId = null // 保存高亮定时器ID

/**
 * 转盘停止回调
 * @param {Object} result - 转盘结果
 */
const onSpinEnd = (result) => {
  console.log('转盘结果:', result)
  uni.showToast({
    title: `恭喜抽中：${result.text}`,
    icon: 'none',
    duration: 2000
  })
}

/**
 * 设置按钮点击
 */
const showSettings = ref(false)
const vibrateOnTick = ref(true)
const spinSeconds = ref(3)
const bgmOn = ref(false)

const onSettings = () => { showSettings.value = true }
const closeSettings = () => { showSettings.value = false }

/**
 * 编辑按钮点击
 */
const onEdit = () => {
  uni.navigateTo({
    url: '/pages/edit/index'
  })
}

/**
 * 分享配置
 */
onShareAppMessage(() => {
  return {
    title: '快来试试这个转盘吧！',
    path: '/pages/wheel/index'
  }
})

// #ifdef MP-WEIXIN
/**
 * 绑定平台全局变量，使 Leafer 能使用小程序 canvas
 */
useCanvas('canvas', uni)

/**
 * 页面渲染完成后再创建 Leafer（官方建议 onReady）
 */
onReady(() => {
  initLeafer()
})

// 从编辑页返回后重绘
onShow(() => {
  const data = uni.getStorageSync('wheel:data')
  if (data && Array.isArray(data.items) && data.items.length) {
    // 更新标题与选项
    title.value = data.title || title.value
    wheelOptions.splice(0, wheelOptions.length, ...data.items.map(it => ({
      text: it.text || '',
      color: it.color || '#4D9CFF',
      weight: it.weight || 1
    })))
    // 重新绘制
    if (leaferRef.value && wheelGroupRef.value) {
      wheelGroupRef.value.removeAll()
      wedgeRefs.value = []
      drawWheel(canvasPx.value)
    }
  }
})

/**
 * 页面卸载时清理资源
 */
onUnload(() => {
  console.log('🔄 正在清理转盘资源...')
  
  // 取消动画帧
  if (animationFrameId) {
    const cancelFn = typeof cancelAnimationFrame === 'function' 
      ? cancelAnimationFrame 
      : clearTimeout
    cancelFn(animationFrameId)
    animationFrameId = null
  }
  
  // 清除高亮定时器
  if (highlightTimeoutId) {
    clearTimeout(highlightTimeoutId)
    highlightTimeoutId = null
  }
  
  // 销毁 LeaferJS 实例
  if (leaferRef.value) {
    try {
      leaferRef.value.destroy()
      console.log('✅ LeaferJS 实例已销毁')
    } catch (e) {
      console.warn('⚠️ 销毁 LeaferJS 实例时出错:', e)
    }
    leaferRef.value = null
  }
  
  wheelGroupRef.value = null
  wedgeRefs.value = []
  isSpinning.value = false
  
  console.log('✅ 转盘资源清理完成')
})

/**
 * 初始化 Leafer 并绘制转盘
 * @returns {void}
 */
function initLeafer() {
  try {
    // 添加 requestAnimationFrame polyfill（小程序环境）
    // #ifdef MP-WEIXIN
    if (typeof wx !== 'undefined' && !wx.requestAnimationFrame) {
      wx.requestAnimationFrame = (cb) => setTimeout(cb, 16)
      wx.cancelAnimationFrame = (id) => clearTimeout(id)
      console.log('✅ requestAnimationFrame polyfill 已加载')
    }
    // #endif
    
    const systemInfo = uni.getSystemInfoSync()
    const rpxToPx = systemInfo.windowWidth / 750
    const sizePx = Math.floor(680 * rpxToPx) // 680rpx 对应画布
    canvasPx.value = sizePx

    // 创建 Leafer（view 为 canvas 的 id）
    leaferRef.value = new Leafer({
      view: 'leafer',
      width: sizePx,
      height: sizePx
    })

    // 中心组（给整个转盘组添加阴影，实现圆形 box-shadow 效果）
    wheelGroupRef.value = new Group({ 
      x: sizePx / 2, 
      y: sizePx / 2, 
      around: 'center',
      shadow: {
        x: 0,
        y: 12,
        blur: 32,
        color: 'rgba(0, 0, 0, 0.18)'
      }
    })
    leaferRef.value.add(wheelGroupRef.value)

    drawWheel(sizePx)
  } catch (e) {
    console.error('初始化 Leafer 失败:', e)
    uni.showToast({ title: '转盘初始化失败', icon: 'none' })
  }
}

/**
 * 绘制转盘
 * @param {number} canvasSizePx - 画布像素尺寸
 */
function drawWheel(canvasSizePx) {
  if (!wheelGroupRef.value || wheelOptions.length === 0) return

  const radius = (canvasSizePx / 2) * 0.92
  const anglePer = 360 / wheelOptions.length
  
  // 清空之前的扇形引用
  wedgeRefs.value = []

  console.log(`📐 绘制转盘: ${wheelOptions.length}项，每项${anglePer.toFixed(1)}°`)
  
  wheelOptions.forEach((opt, i) => {
    // 第 i 项的中心角度（初始状态，rotation = 0）
    const centerAngle = (i * anglePer) - 90
    const startAngle = centerAngle - (anglePer / 2)

    const wedge = new Ellipse({
      x: 0,
      y: 0,
      width: radius * 2,
      height: radius * 2,
      innerRadius: 0,
      startAngle,
      endAngle: startAngle + anglePer,
      fill: opt.color,
      stroke: '#FFFFFF',
      strokeWidth: 3,
      around: 'center'
    })
    wheelGroupRef.value.add(wedge)
    wedgeRefs.value.push(wedge)

    // 文字位置
    const textAngle = centerAngle
    const textRadius = radius * 0.62
    const x = Math.cos((textAngle * Math.PI) / 180) * textRadius
    const y = Math.sin((textAngle * Math.PI) / 180) * textRadius
    const label = new Text({
      x,
      y,
      text: opt.text || '',
      fill: '#FFFFFF',
      fontSize: Math.max(16, Math.floor(canvasSizePx / 22)),
      stroke: 'rgba(0,0,0,0.15)',
      strokeWidth: 2,
      vertical: true,
      around: 'center',
      rotation: textAngle + 90
    })
    wheelGroupRef.value.add(label)

    // 红点：标记此项的中心线
    const dotAngle = centerAngle
    const dotRadius = radius * 0.85
    const dotX = Math.cos((dotAngle * Math.PI) / 180) * dotRadius
    const dotY = Math.sin((dotAngle * Math.PI) / 180) * dotRadius
    const optionDot = new Ellipse({
      x: dotX,
      y: dotY,
      width: 10,
      height: 10,
      fill: '#FF0000',
      around: 'center'
    })
    wheelGroupRef.value.add(optionDot)
  })

  // 中心圆（带内阴影效果，更立体）
  const centerSize = radius * 0.24
  wheelGroupRef.value.add(
    new Ellipse({
      x: 0,
      y: 0,
      width: centerSize,
      height: centerSize,
      fill: '#FFFFFF',
      stroke: '#1E88E5',
      strokeWidth: 6,
      around: 'center',
      innerShadow: {
        x: 0,
        y: 2,
        blur: 4,
        color: 'rgba(0, 0, 0, 0.1)'
      }
    })
  )
}

/**
 * GO：开始旋转
 */
function startSpin() {
  if (isSpinning.value || wheelOptions.length === 0) return;
  
  // ✅ 开始新一轮转盘前，清除上一次的蒙版效果
  wedgeRefs.value.forEach(wedge => {
    if (wedge) {
      wedge.opacity = 1
      wedge.shadow = undefined
    }
  })
  
  isSpinning.value = true;

  const targetIndex = Math.floor(Math.random() * wheelOptions.length)
  const anglePer = 360 / wheelOptions.length
  const spins = 5 + Math.floor(Math.random() * 4) // 确保是整数：5,6,7,8

  // 坐标系校正：
  // 初始第 i 项中心角 center(i) = i*anglePer - 90（顶部为 -90°）
  // 目标条件：center(i) + R ≡ -90 (mod 360) → R ≡ -i*anglePer (mod 360)
  const targetRotationMod = ((-targetIndex * anglePer) % 360 + 360) % 360
  const currentRotationMod = ((currentRotation.value % 360) + 360) % 360
  let deltaRotation = targetRotationMod - currentRotationMod
  if (deltaRotation <= 0) deltaRotation += 360
  deltaRotation += 360 * spins // spins现在是整数，确保360的整倍数

  const finalRotation = currentRotation.value + deltaRotation

  console.log(`🎯 旋转: 选中项${targetIndex}[${wheelOptions[targetIndex].text}] 圈数:${spins} 目标模360:${targetRotationMod.toFixed(1)}° 最终模360:${((finalRotation % 360 + 360) % 360).toFixed(1)}°`)

  animateWheel(finalRotation, targetIndex)
}

/**
 * 旋转动画
 * @param {number} targetAngle
 * @param {number} resultIndex
 */
function animateWheel(targetAngle, resultIndex) {
  const duration = Math.max(1000, spinSeconds.value * 1000)
  const start = Date.now()
  const startRotation = currentRotation.value
  const deltaRotation = targetAngle - startRotation

  const step = () => {
    const elapsed = Date.now() - start
    const p = Math.min(elapsed / duration, 1)
    
    // 使用更平滑的缓动函数：先加速后减速
    const easeInOut = p < 0.5 
      ? 2 * p * p 
      : 1 - Math.pow(-2 * p + 2, 3) / 2
    
    // 确保旋转角度精确计算，避免累积误差
    currentRotation.value = startRotation + deltaRotation * easeInOut
    
    // 确保wheelGroup的旋转中心固定在画布中心
    if (wheelGroupRef.value) {
      wheelGroupRef.value.rotation = currentRotation.value
      // 确保旋转中心始终在画布中心，防止偏移
      wheelGroupRef.value.x = canvasPx.value / 2
      wheelGroupRef.value.y = canvasPx.value / 2
    }
    
    // 经过每个格子的触感反馈
    if (vibrateOnTick.value && p < 0.95) { // 接近结束时停止振动
      const anglePer = 360 / Math.max(1, wheelOptions.length)
      const currentAngleMod = ((currentRotation.value % 360) + 360) % 360
      const tickIndex = Math.floor(currentAngleMod / anglePer)
      if (tickIndex !== animateWheel._lastTick) {
        animateWheel._lastTick = tickIndex
        // iOS/Android 设备振动
        if (wx && wx.vibrateShort) wx.vibrateShort({ type: 'light' })
      }
    }
    
    if (p < 1) {
      // 检查页面是否还存在，避免在页面销毁后继续动画
      if (!leaferRef.value) {
        console.warn('⚠️ 页面已销毁，停止动画')
        isSpinning.value = false
        return
      }
      
      // 小程序逻辑层无 requestAnimationFrame，这里做降级处理
      const raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : (cb) => setTimeout(cb, 16)
      animationFrameId = raf(step)
    } else {
      // 动画结束，确保精确停在目标位置
      currentRotation.value = targetAngle
      if (wheelGroupRef.value) {
        wheelGroupRef.value.rotation = currentRotation.value
      }
      
      // --- FINAL VALIDATION & STATE RESET ---
      isSpinning.value = false

      const finalAngleMod = ((currentRotation.value % 360) + 360) % 360
      const pointerAngle = 270 // -90° 标准化为 270°
      
      // 验证对齐
      const anglePer = 360 / wheelOptions.length
      const targetInitialCenter = (resultIndex * anglePer - 90 + 360) % 360
      const targetAfterRotation = (targetInitialCenter + finalAngleMod) % 360
      const targetDistance = Math.min(
        Math.abs(targetAfterRotation - pointerAngle),
        360 - Math.abs(targetAfterRotation - pointerAngle)
      )
      const isAligned = targetDistance < 3
      
      console.log(`✅ 停止: 项${resultIndex}[${wheelOptions[resultIndex].text}] 转盘角:${finalAngleMod.toFixed(1)}° 该项角:${targetAfterRotation.toFixed(1)}° 对齐:${isAligned ? '✅' : '❌偏差' + targetDistance.toFixed(1) + '°'}`)

      highlightWinner(resultIndex)
      onSpinEnd(wheelOptions[resultIndex])
    }
  }
  step()
}

/**
 * 高亮中奖项，其他项添加蒙版
 * @param {number} winnerIndex - 中奖项索引
 */
function highlightWinner(winnerIndex) {
  wedgeRefs.value.forEach((wedge, i) => {
    if (i === winnerIndex) {
      // 中奖项：保持原样或稍微提亮
      wedge.opacity = 1
      // 可选：添加微弱外发光效果
      wedge.shadow = {
        x: 0,
        y: 0,
        blur: 20,
        color: 'rgba(255, 255, 255, 0.6)'
      }
    } else {
      // 其他项：添加半透明蒙版（暗淡效果）
      wedge.opacity = 0.3
    }
  })
  
  // ✅ 不再自动清除蒙版，蒙版会一直保持到下次转盘
  // 清除之前的定时器（如果有）
  if (highlightTimeoutId) {
    clearTimeout(highlightTimeoutId)
    highlightTimeoutId = null
  }
}

/**
 * 触摸事件转发给 Leafer
 * @param {TouchEvent} e
 */
function receiveEvent(e) {
  if (leaferRef.value) leaferRef.value.receiveEvent(e)
}
// #endif
</script>

<style lang="scss" scoped>
.wheel-page {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #FFF5F7 0%, #F3E8FF 100%);
  display: flex;
  flex-direction: column;
  padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); // 为悬浮TabBar留出空间
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx 20rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  box-shadow: 0 4rpx 20rpx rgba(255, 182, 193, 0.15);
}

.title-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  position: relative;
}

.main-title {
  font-size: 52rpx;
  font-weight: 800;
  background: linear-gradient(135deg, #D87093 0%, #9370DB 50%, #D87093 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 4rpx;
  text-shadow: 0 4rpx 12rpx rgba(216, 112, 147, 0.2);
  animation: titleShine 3s ease-in-out infinite, titleFloat 2s ease-in-out infinite;
}

@keyframes titleShine {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

@keyframes titleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3rpx);
  }
}

.title-decoration {
  width: 100rpx;
  height: 6rpx;
  border-radius: 3rpx;
  background: linear-gradient(90deg, transparent, #D87093, #9370DB, #D87093, transparent);
  animation: decorationPulse 2s ease-in-out infinite;
}

@keyframes decorationPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scaleX(0.8);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

.share-icon-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFE5EC 0%, #F3E8FF 100%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  line-height: 1;
  box-shadow: 0 6rpx 20rpx rgba(255, 182, 193, 0.3);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  
  &::after {
    border: none;
  }
  
  &:active {
    transform: scale(0.9) rotate(15deg);
  }
  
  .share-icon {
    font-size: 36rpx;
  }
}

.wheel-container {
  width: 680rpx;
  height: 680rpx;
  margin: 40rpx auto 32rpx;
  position: relative;
}

.wheel-canvas {
  width: 100%;
  height: 100%;
}

.go-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFE5EC 0%, #F3E8FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 32rpx rgba(255, 182, 193, 0.35);
  border: 8rpx solid #fff;
  pointer-events: auto;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:active {
    transform: translate(-50%, -50%) scale(0.92);
    box-shadow: 0 4rpx 20rpx rgba(255, 182, 193, 0.4);
  }
}

.go-text {
  background: linear-gradient(135deg, #D87093 0%, #9370DB 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 56rpx;
  font-weight: 800;
  letter-spacing: 3rpx;
}

/* 顶部指针（三角形箭头） */
.pointer {
  position: absolute;
  top: -12rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 24rpx solid transparent;
  border-right: 24rpx solid transparent;
  border-top: 40rpx solid #D87093;
  z-index: 10;
  filter: drop-shadow(0 4rpx 12rpx rgba(216, 112, 147, 0.3));
}

.bottom-actions {
  display: flex;
  justify-content: space-around;
  padding: 48rpx 120rpx 60rpx;
  gap: 32rpx;
  
  .action-circle {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFE5EC 0%, #F3E8FF 100%);
    box-shadow: 0 8rpx 32rpx rgba(255, 182, 193, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 4rpx solid #fff;
    
    &:active {
      transform: scale(0.88);
      box-shadow: 0 4rpx 20rpx rgba(255, 182, 193, 0.3);
    }
    
    .icon {
      font-size: 56rpx;
    }
  }
}

/* 设置面板样式 */
.settings-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 1000;
  backdrop-filter: blur(4rpx);
}

.settings-panel {
  background: linear-gradient(135deg, #FFF5F7 0%, #F3E8FF 100%);
  width: 100%;
  border-top-left-radius: 48rpx;
  border-top-right-radius: 48rpx;
  padding: 40rpx 32rpx 56rpx;
  box-shadow: 0 -12rpx 48rpx rgba(255, 182, 193, 0.25);
  animation: slideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.panel-title {
  text-align: center;
  font-size: 36rpx;
  font-weight: 700;
  margin-bottom: 40rpx;
  background: linear-gradient(135deg, #D87093 0%, #9370DB 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 2rpx;
}

.panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 24rpx;
  margin-bottom: 16rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
  border-radius: 24rpx;
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  box-shadow: 0 4rpx 16rpx rgba(255, 182, 193, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:active {
    transform: scale(0.98);
  }
  
  &:last-of-type {
    margin-bottom: 0;
  }
}

.stepper {
  display: flex;
  align-items: center;
  gap: 24rpx;
  
  button {
    width: 64rpx;
    height: 64rpx;
    border-radius: 16rpx;
    background: linear-gradient(135deg, #FFE5EC 0%, #F3E8FF 100%);
    border: 2rpx solid #fff;
    color: #D87093;
    font-size: 32rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 12rpx rgba(255, 182, 193, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &::after {
      border: none;
    }
    
    &:active {
      transform: scale(0.88);
      box-shadow: 0 2rpx 8rpx rgba(255, 182, 193, 0.25);
    }
  }
  
  .num {
    min-width: 70rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 700;
    background: linear-gradient(135deg, #D87093 0%, #9370DB 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.panel-close {
  width: 100%;
  margin-top: 40rpx;
  background: linear-gradient(135deg, #D87093 0%, #9370DB 100%);
  color: #fff;
  border-radius: 28rpx;
  padding: 28rpx 0;
  font-size: 32rpx;
  font-weight: 700;
  border: none;
  box-shadow: 0 8rpx 32rpx rgba(216, 112, 147, 0.35);
  letter-spacing: 2rpx;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  
  &::after {
    border: none;
  }
  
  &:active {
    transform: scale(0.96);
    box-shadow: 0 4rpx 20rpx rgba(216, 112, 147, 0.4);
  }
}
</style>

